<template>
  <!------------------------------------ 商品列表 ------------------------------------
    @desc 包含商品管理列表，快速下单商品列表，核销商品列表
    @author kyle
    @date 2021-03-05
    @props
      productList  ———— 商品列表数据
      purchaseList ———— 供应商列表
      listType     ———— 列表类型
      sortable     ———— 是否可排序
      typeObj      ———— 采购下单搜索type
    @method
      editDetail    ———— 编辑商品
      goDetail      ———— 进入详情
      showSpec      ———— 显示规格弹窗
      updateCart    ———— 更新购物车
  -->
  <div>
    <!-- 采购下单tab -->
    <div v-if="listType === 'purchase' && showTab === true" class="mt-10 tac flex-center">
      <span class="list-item" :class="itemActiveIndex === 0 ? 'list-item-active left-active' : ''" @click="changeItem(0)">按商品展示</span>
      <span
        class="list-item"
        :class="itemActiveIndex === 1 ? 'list-item-active right-active' : ''"
        @click="changeItem(1)"
      >按供应商展示</span>
    </div>
    <div v-show="!sortable">
      <!-- 商品管理页面列表 -->
      <ul v-if="listType === 'productManage'">
        <li v-for="(item, index) in productList" :key="index" class="bg-white productItem" @click="goDetail(item.ID)">
          <div class="flex">
            <img-box class="is-130 br-10 flex-s-0" :img-url="item.ThumbnailUrl410" />
            <div class="productItem-detail ml-20 flex-1">
              <p class="text-show-line-2 mb-10" :class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''">
                {{ item.ProductName }}
              </p>
              <p class="flex-s-c">
                <span class="fs-22 pr-10">{{ item.ProductStatusName }}</span>
              </p>
              <p class="productItem-p-left">
                <span class="color-gray-light">单价：</span><span :class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''">￥{{ item.ProductPrice }}</span><span v-show="item.Unit" class="color-gray-light">/{{ item.Unit }}</span>
              </p>
              <div class="productItem-p-right bg-primary color-white lh-42 plr-25 br-21" @click.stop="editDetail(item.ID)">编辑</div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 快速下单页面列表 -->
      <ul v-if="listType === 'quickPlaceOrder'">
       
      </ul>

      <!-- 核销页面列表 -->
      <ul v-if="listType === 'productWriteoff'">
        <li v-for="(item, index) in productList" :key="index" class="mtb-20  br-10 ofh bg-white" @click="goDetail(item.ID)">
          <div>
            <div class="plr-25 pt-10 bg-fa">
              <p class="color-black lh-lg fw-500">{{ artificer? '客户：':'核销会员：'}}{{ item.RealName }}</p>
              <p class="color-black lh-lg fw-500">
                {{ artificer? '服务码：':'核销码：'}}{{ item.WriteoffCode }}{{ item.GiftId === -1 ? '【赠品】' : '' }}{{ item.CodeType === 1 ? '【总码】' : '' }}
              </p>
              <div class="flex-s-c lh-lg">
                <p class="color-gray-light fs-20">{{ artificer? '服务时间：':'核销时间：'}}{{ item.WriteoffTime }}</p>
                <p class="color-gray-light fs-20">订单号：{{ item.Sn }}</p>
              </div>
            </div>
            <div class="flex ptb-30 plr-25">
              <img-box class="is-130 br-10 flex-s-0" :img-url="item.ProductImage" />
              <div class="productItem-detail ml-20 flex-1">
                <p class="text-show-line-2 mb-10 color-dark">{{ item.ProductName }}</p>
                <p class="fs-20 color-gray-light">{{ item.Attribute }}</p>
                <p class="productItem-p-left color-primary">￥{{ item.WeightPrice }}</p>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 采购下单 -->
      <div v-if="listType === 'purchase'">
        <!-- 按商品展示 -->
        <ul v-show="itemActiveIndex === 0">
          <li v-for="(item, index) in productList" :key="index" class="bg-white productItem" @click="goDetailPage(item, index)">
            <div class="flex">
              <img-box class="is-130 br-10 flex-s-0" :img-url="item.ProductImg" />
              <div class=" ml-20 flex-1">
                <p class="text-show-line-2 fs-28 fw-b">{{ item.ProductName }}</p>
                <p v-if="item.MinPrice < item.MaxPrice" class="color-primary fs-32 mt-10">
                  <span class="fs-24 mr--2">￥</span><span class="fw-b">{{ item.MinPrice }}</span> <span class="fs-24 mr--2"> ~￥</span><span class="fw-b">{{ item.MaxPrice }}</span>
                </p>
                <p v-if="item.MinPrice === item.MaxPrice" class="color-primary fs-32 mt-10">
                  <span class="fs-24 mr--2">￥</span><span class="fw-b">{{ item.MinPrice }}</span>
                </p>
              </div>
            </div>
          </li>
        </ul>
        <!-- 按供应商展示 -->
        <ul v-show="itemActiveIndex === 1">
          <li v-for="(item, index) in purchaseList" :key="index" class="bg-white productItem">
            <svg-icon class="flex-v-c " :class="item.PurchaseProductList && item.PurchaseProductList.length > 2 ? 'right-arrow' : ''">
              <div class="flex-s-0 item-store" @click.stop="gotoSupplier(item.PurchaseMemberId)">
                <p class="text-show-line-2 fs-24 tac fw-b">{{ item.PurchaseMemberName }}</p>
                <p class="tac">
                  <span class="item-store-btn">进店</span>
                </p>
              </div>
              <div class="flex-1 flex-s-c" @click.stop="gotoSupplierProduct(item.PurchaseMemberId)">
                <div v-for="(item1, ind) in item.PurchaseProductList" :key="ind" class="item-product">
                  <img-box class="is-100 br-10 flex-s-0 mr-30" :img-url="item1.ProductImg" />
                  <p class="fs-18 color-gray-light"><span class="fs-14 mr--2">￥</span>{{ item1.MinPrice }}起</p>
                </div>
              </div>
            </svg-icon>
          </li>
        </ul>
      </div>

      <!-- 订单详情 -->
      <ul v-if="listType === 'orderDetail'">
        <li v-for="(item, index) in productList" :key="index" class="bg-white productItem" @click="goDetail(item.ProductId)">
          <div class="flex">
            <img-box class="is-130 br-10 flex-s-0" :img-url="item.ProductImg" />
            <div class="productItem-detail ml-20 flex-1">
              <p class="text-show-line-2 mb-10">{{ item.ProductName }}</p>
              <p class="flex-s-c">
                <span class="color-gray-light fs-20">{{ item.Attribute }}</span>
              </p>
              <p class="productItem-p-left">
                <span
                  class="color-primary fs-28"
                >{{ item.Price }}<span v-show="item.RatioUnit" class="fs-24">/{{ item.RatioUnit }}</span></span>
              </p>
              <div class="productItem-p-right lh-42 br-21">x{{ item.Amount }}{{ item.RatioUnit }}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
  name: 'ProductList',
  components: {
    imgBox
  },
  props: {
    productList: {
      type: Array,
      required: true
    },
    purchaseList: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    listType: {
      type: String,
      required: true
    },
    sortable: {
      type: Boolean,
      default: false
    },
    showTab: {
      type: Boolean,
      default: false
    },
    typeObj: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
		switch85:{
			type:Number,
			required: false,
			default:0
		},
		switch7:{
			type:Number,
			required: false,
			default:0
		},
		artificer: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      itemActiveIndex: 0,
		
    }
  },
  computed: {},
  created() {
	},
  methods: {
    // 编辑商品
    editDetail(id) {
      console.log(this.type)
      this.$emit('editDetail', id)
    },
    // 进入详情
    goDetail(id) {
      this.$emit('goDetail', id)
    },
    // 加减
    changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy) {
      const _oldAmount = item.Amount
      this.$utils.changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy,this.switch7)
      if (_oldAmount !== item.Amount || type === 0) {
        this.$emit('updateCart', item)
      }
    },
    // 显示规格弹窗
    showSpec(item, index) {
      this.$emit('showSpec', item, index)
    },
    // 进入商品详情
    goDetailPage(item, index) {
			console.log('item',item)
      this.$emit('goDetailPage', item, index)
    },
    // 切换显示效果
    changeItem(index) {
      this.itemActiveIndex = index
      this.$emit('changeItem', index)
    },
    gotoSupplier(id) {
      this.$router.push('/purchase/StoreHome/' + id)
    },
    gotoSupplierProduct(id) {
      const _obj = {
        type: this.typeObj.type,
        typePath: this.typeObj.typePath,
        purchaseMemberId: id
      }
      this.$router.push('/purchase/StoreSearchList/' + JSON.stringify(_obj))
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  flex: 1;
  font-size: 24px;
  line-height: 70px;
}
.list-item-active {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    bottom: 10px;
    left: calc(50% - 20px);
    @include bg-primary;
    border-radius: 2px;
  }
}
.left-active {
  border-top-right-radius: 10px;
  &:after {
    content: '';
    position: absolute;
    right: -26px;
    top: 0;
    width: 0;
    height: 0;
    border-right: 30px solid transparent;
    border-bottom: 70px solid $colorF;
  }
}
.right-active {
  border-top-left-radius: 10px;
  &:after {
    content: '';
    position: absolute;
    left: -26px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-bottom: 70px solid $colorF;
  }
}

.productItem {
  padding: 32px 22px;
  position: relative;
  z-index: 1;
  &:not(:last-child) {
    margin-bottom: 2px;
  }
  .right-arrow {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 40px;
      right: 0;
      width: 20px;
      height: 20px;
      border: 2px solid;
      border-color: $colorC $colorC transparent transparent;
      transform: rotate(45deg);
    }
  }
  .item-store {
    width: 170px;
    margin-right: 40px;
    .item-store-btn {
      position: relative;
      margin: 20px auto 0;
      font-size: 20px;
      line-height: 34px;
      border-radius: 17px;
      padding: 0 30px 0 20px;
      @include color-primary;
      display: inline-block;
      border: 1px solid currentColor;
      &:after {
        content: '';
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border: 2px solid;
        border-color: currentColor currentColor transparent transparent;
        transform: rotate(45deg);
      }
    }
  }
  .item-product {
    margin-right: 10px;
    display: none;
    &:first-child,
    &:nth-child(2) {
      display: block;
    }
  }
}
.productItem-1 {
  padding: 0 22px;
  margin-top: 32px;
}

.sortable-chosen {
  box-shadow: 0 0 20px #ccc;
  z-index: 2;
  margin: 0 4px;
}
.left-money {
  padding-left: 16px;
  position: relative;
  &:before {
    content: '￥';
    position: absolute;
    bottom: 4px;
    font-size: 24px;
    font-weight: 500;
    left: -4px;
  }
}
.productItem-detail {
  padding-bottom: 50px;
  position: relative;
  .productItem-p-left {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .productItem-p-right {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .tel-text{
    color: $colorF;
    @include bg-primary;
    padding: 10px 20px;
    border-radius: 28px;
  }
  .select-box {
    display: inline-block;
    position: relative;
    padding: 0 36px 0 13px;
    line-height: 30px;
    font-size: 20px;
    border-radius: 15px;
    border: 1px solid currentColor;
    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      top: 5px;
      right: 10px;
      border: 1px solid;
      border-color: transparent currentColor currentColor transparent;
      transform: rotate(45deg);
    }
    .select-item-box {
      position: absolute;
      left: 0;
      color: $color3;
      width: auto;
      background: rgba(0, 0, 0, 0.1);
      z-index: 100;
      p {
        padding-left: 13px;
      }
    }
  }
}
.upDown-box {
  position: absolute;
  bottom: 32px;
  right: 22px;
  width: 110px;
  height: 40px;
  .up {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .down {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.btn-input-box {
  position: relative;
  margin: 0 4px;
  &:before {
    background: transparent;
  }
  .btn-input {
    position: relative;
    z-index: 1;
    height: 42px;
    width: 50px;
    line-height: 1;
    border: none;
    text-align: center;
  }
}
.bottom-popup {
  border-radius: 40px 40px 0 0;
}
</style>
